<template>
  <div class="JoinIn-container">

    <searchBar placeHolder='请输入维修厂名称/负责人'
               @handleSearch='getList' />
    <el-table v-loading='loading'
              highlight-current-row
              :data="JoinInData"
              style="width:100%">
      <el-table-column label="维修厂名称"
                       align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="维修厂名称"
                      width="200"
                      trigger="hover"
                      :content="scope.row.company">
            <el-button slot="reference"
                       type="text"
                       @click="show=true,state=0,sid=scope.row.sid,details(scope.row)"
                       class="ellipsis">{{scope.row.company}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="负责人"
                       prop="leader"
                       align="center">
      </el-table-column>
      <el-table-column label="电话"
                       prop="phone"
                       align="center">

      </el-table-column>
      <el-table-column label="售卡量"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='show=true,state=1,sid=scope.row.sid,details(scope.row.sid)'>{{scope.row.card_sale_num}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="服务次数"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='show=true,state=2,sid=scope.row.sid,details(scope.row.sid)'>{{scope.row.service_num}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="车管家绑定"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='show=true,state=3,sid=scope.row.sid,details(scope.row)'>详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="余额"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='show=true,state=4,sid=scope.row.sid,details(scope.row.sid)'>{{scope.row.balance}}元</el-button>
        </template>
      </el-table-column>
      <el-table-column label="所属运营商"
                       align="center"
                       width="180px">
        <template slot-scope="scope">
          <el-popover ref="popover4"
                      title='详情'
                      placement="right"
                      width="400"
                      trigger="hover"
                      @show="operator_details(scope.row)">
            <el-button slot="reference"
                       type="text">{{scope.row.a_compnay}}</el-button>
            <div v-if='detailsData'
                 v-loading='operatorLoading'
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 class="details">
              <div v-if='operatorData.list'>
                <div>
                  <span>运营商名称 : </span>
                  <span>{{operatorData.list.company}}</span>
                </div>
                <div>
                  <span>负责人 : </span>
                  <span>{{operatorData.list.leader}}</span>
                </div>
                <div>
                  <span>联系电话 : </span>
                  <span>{{operatorData.list.phone}}</span>
                </div>
                <div>
                  <span>注册时间 : </span>
                  <span>{{operatorData.list.audit_time}}</span>
                </div>
                <div>
                  <span>合作状态 : </span>
                  <span>{{operatorData.list.status | status}}</span>
                </div>
              </div>
              <div class="region"
                   v-if="operatorData.area">
                <div>
                  <span>管辖地区 :</span>
                  <span v-for="(item,index) in operatorData.area"
                        style=""
                        :key="index">
                    {{`${index+1}.${item.province}${item.city}${item.county}、`}}
                  </span>
                </div>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.audit_status | status}}
        </template>
      </el-table-column>
      <el-table-column label="开通时间"
                       prop="audit_time"
                       align="center">
      </el-table-column>
    </el-table>
    <v-pagination v-show="total>0"
                  :page.sync='listQuery.page'
                  :total='total'
                  :limit.sync='listQuery.pageSize'
                  @pagination='getList()' />
    <v-dialog :width='dialogWidth'
              v-if='show'
              :show.sync='show'
              title="详情">
      <component :is='state | dynamicAssembly'
                 :data='detailsData'
                 :loading='detailsLoading'
                 :sid='sid'
                 @changeSize='details' />

    </v-dialog>
  </div>
</template>
<script>
import { shopDetails, JoinCard, joinServe, CarBind, balance } from './components'  //弹框中所展示的内容 放在一个页面中我感觉当前页面代码量多,分开写了,根据state取决于显示那个
export default {
  components: { shopDetails, JoinCard, joinServe, CarBind, balance },
  data () {
    return {
      JoinInData: [],
      loading: false, //tabele loading加载
      pickerTime: [],
      total: 0, //总页数
      listQuery: {
        page: 1,
        pageSize: 5,  //每页显示多少条
        search: '',
      },
      state: 0,  //弹框状态 0-维修厂详情 1-售卡量详情 2-服务次数详情 3-车管家绑定详情 4-余额详情  5-所属运营商详情  根据不同的状态展示不同的数据
      show: false, //弹框隐藏/显示
      sid: '', //维修厂id
      detailsData: {}, //维修厂显示数据
      operatorData: {}, //运营商详情
      operatorLoading: false,
      detailsLoading: false //详情弹框loding加载
    }
  },
  filters: {
    status (val) {  //过滤审核状态
      return val == 0 ? '未完善信息 ' : val == 1 ? '未审核' : val == 2 ? '已审核' : val == 3 ? '驳回' : val == 4 ? '取消合作' : val == 5 ? '关停' : '取消合作'
    },
    dynamicAssembly (val) {  //动态组件
      return val == 0 ? 'shopDetails' : val == 1 ? 'JoinCard' : val == 2 ? 'joinServe' : val == 3 ? 'CarBind' : 'balance'
    }
  },
  computed: {
    dialogWidth () {  //根据state 来改变弹框宽
      let state = this.state
      return state == 0 ? '30%' : state == 1 ? '60%' : state == 2 ? '65%' : ''
    }
  },
  methods: {
    async getList (e) {  //获取加盟维修厂列表
      this.loading = true

      const res = await this.api.ShopList(Object.assign({}, this.listQuery, e))
      this.loading = false
      this.total = res.data.rows || 0;
      this.JoinInData = res.data.list || []
    },
    async details (row) {  //详情
      this.detailsLoading = true
      const Sid = Object.assign({}, { sid: this.sid, page: row.page })  //sid 维修厂id
      const res = this.state == 0 ? await this.api.companyDetail(Sid) : this.state == 2 ? await this.api.joinServiceDetail(Sid) : this.state == 3 ? await this.api.joinCar(Sid) : ''
      this.detailsData = res.data || []
      this.detailsLoading = false
    },
    async operator_details (row) {  //运营商详情
      try {
        this.operatorLoading = true
        const res = await this.api.joinAgent({ aid: row.aid })
        this.operatorData = res.data || {}
        this.operatorLoading = false
      } catch (err) {
        throw (err)
      }
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.filter-container {
  & > div {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.ellipsis {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

